
let new_arrivals_scroll_container_coordinate = 0;
{

    function handleNewArrivalsToLeft() {
        let container = document.getElementById("new_arrivals_scroll_container");
        let parentWidth = window.getComputedStyle(document.getElementById("new_arrivals_scroll")).width;
        parentWidth = new Number(parentWidth.substr(0, parentWidth.indexOf("px")));

        if(new_arrivals_scroll_container_coordinate < 0){
            container.style.left = ((++new_arrivals_scroll_container_coordinate) * parentWidth) + "px";
        }
    }

    function handleNewArrivalsToRight() {
        let container = document.getElementById("new_arrivals_scroll_container");
        let parentWidth = window.getComputedStyle(document.getElementById("new_arrivals_scroll")).width;
        parentWidth = new Number(parentWidth.substr(0, parentWidth.indexOf("px")));

        if(new_arrivals_scroll_container_coordinate > -4){
            container.style.left = ((--new_arrivals_scroll_container_coordinate) * parentWidth) + "px";
        }
    }


}

{

    function getRandomString(length) {
        length = length || 32;
        let t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
            a = t.length,
            n = "";
        for (i = 0; i < length; i++) n += t.charAt(Math.floor(Math.random() * a));
        return n
    }

    function creatNewArrivalsScrollContent() {
        let content = document.createElement("div");
        content.setAttribute("class","content");
        let div = document.createElement("div");
        let image_a_container = document.createElement("a");
        image_a_container.setAttribute("href","./product.html");
        let image_container = document.createElement("div");
        image_container.setAttribute("class","image_container");
        let image = document.createElement("img");
        image.setAttribute("src",`../resource/images/new_arrivals_0_${getNumber(0,4)}.webp`);
        image.setAttribute("class","image");
        let image_hover = document.createElement("img");
        image_hover.setAttribute("class","image_hover");
        let split_line_container = document.createElement("div");
        split_line_container.setAttribute("class","split_line_container");
        let custom_split_line = document.createElement("div");
        custom_split_line.setAttribute("class","custom_split_line");
        let product_name_container = document.createElement("div");
        product_name_container.setAttribute("class","product_name");
        let product_name = document.createElement("a");
        product_name.setAttribute("href","./product.html");
        product_name.appendChild(document.createTextNode(`${getRandomString(15)}`));
        let price = document.createElement("h4");
        price.setAttribute("class","price");
        price.appendChild(document.createTextNode(`$${getNumber(30,150)}`));

        product_name_container.appendChild(product_name);
        split_line_container.appendChild(custom_split_line);
        image_container.appendChild(image);
        image_container.appendChild(image_hover);
        image_a_container.appendChild(image_container);
        div.appendChild(image_a_container);
        div.appendChild(split_line_container);
        div.appendChild(product_name_container);
        div.appendChild(price);
        if(getNumber(0,9) > 4) {
            let styles = document.createElement("div");
            styles.setAttribute("class","styles");
            for (let i = 0,j = getNumber(2,5),name = getRandomString(8); i < j; i++) {
                let style = document.createElement("input");
                if(i == 0) style.setAttribute("checked","checked");
                style.setAttribute("type","radio");
                style.setAttribute("name",name);
                style.setAttribute("number",`${i}`);
                style.addEventListener("mouseenter",function (e) {
                    e.target.checked = true;
                    image.setAttribute("src",`../resource/images/new_arrivals_0_${style.getAttribute("number")}.webp`);
                },false)
                styles.appendChild(style);
            }
            div.appendChild(styles);
        }
        content.appendChild(div);
        return content;
    }

    function creatFollowUsScrollContent() {
        let content = document.createElement("div");
        content.setAttribute("class","content");
        let div = document.createElement("div");
        let image = document.createElement("img");
        image.setAttribute("src",`../resource/images/index_follow_us_${getNumber(0,4)}.jpg`);
        image.setAttribute("class","image");
        let mask = document.createElement("div");
        mask.setAttribute("class","mask");
        let ins = document.createElement("img");
        ins.setAttribute("src","../resource/images/instagram_white.png")
        mask.appendChild(ins);
        div.appendChild(image);
        div.appendChild(mask);
        content.appendChild(div);
        return content;
    }

    let new_arrivals_scroll_container = document.getElementById("new_arrivals_scroll_container");
    for (let i = 0; i < 20; i++) {
        new_arrivals_scroll_container.appendChild(creatNewArrivalsScrollContent());
    }

    let follow_us_container = document.getElementById("follow_us_scroll_container");
    for (let i = 0; i < 15; i++) {
        follow_us_container.appendChild(creatFollowUsScrollContent());
    }
}

window.onResizeFuntionList.push(function () {
    {
        let container = document.getElementById("new_arrivals_scroll_container");
        let parentWidth = window.getComputedStyle(document.getElementById("new_arrivals_scroll")).width;
        parentWidth = new Number(parentWidth.substr(0, parentWidth.indexOf("px")));

        container.style.left = (new_arrivals_scroll_container_coordinate * parentWidth) + "px";
    }
});
